<template>
	<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
		<view class="pop-wrap flexc h80">
			<view class="pop-nav">
				<view class="">记账本</view>
				<view class="close iconfont icon-guanbi1" @click="close"></view>
			</view>
			<view class="flexr flex-a-c flex-j-b type-pd">
				<view class="flexr flex-a-c">
					<view :class="['pt', checkType == 1 ? 'p1' : '']" @click="checkTypeBtn(1)">支出</view>
					<view :class="['pt', checkType == 2 ? 'p2' : '']" @click="checkTypeBtn(2)">入账</view>
					<view :class="['pt', checkType == 3 ? 'p3' : '']" @click="checkTypeBtn(3)">不计入收支</view>
				</view>
				<view class="flex1">
					<uni-datetime-picker type="date" :clear-icon="false" v-model="single" @change="maskClick" />
				</view>
			</view>
			<view class="flexr flex-a-c price-t">
				<text>￥</text>
				<input type="number" placeholder="请输入金额,最大不超过10,0000" v-model="price" @input="priceFormat" />
			</view>
			<view class="flex1 over-auto p-c">
				<view class="flexr flex-a-c flex-wr">
					<view :class="['p-box']" v-for="(val, k) in list[checkType - 1].list" :key="val.title" @click="editCheck(val)">
						<view
							:class="[
								'iconfont',
								'icon-set',
								val.icon,
								checkType + '-' + checkContent == val.type ? (checkType == 1 ? 'ac1' : checkType == 2 ? 'ac2' : checkType == 3 ? 'ac3' : '') : ''
							]"
						></view>
						<view :class="[checkType + '-' + checkContent == val.type ? 'ac' : '']">{{ val.title }}</view>
					</view>
					<view class="p-box" @click="goEditTypeList">
						<view class="iconfont icon-quanbu icon-set"></view>
						<view class="b">分类管理</view>
					</view>
				</view>
			</view>

			<view class="flexr flex-a-c flex-j-b type-pd p-r">
				<view class="">备注</view>
				<view class="p-i"><uni-easyinput type="text" v-model="remark" maxlength="30" placeholder="请输入备注内容,不超过30个字" trim></uni-easyinput></view>
			</view>
			<view :class="['confirm', price ? (checkType == 1 ? 'ac1' : checkType == 2 ? 'ac2' : checkType == 3 ? 'ac3' : '') : 'd']" @click="addListBtn">确定</view>
		</view>
	</uni-popup>
</template>

<script>
import { ref, reactive, computed, toRefs, nextTick, } from 'vue';
import { useStore } from '../store';
import requestApi from '../utils/api.js';
import { formatTime } from '../utils/util.js';
export default {
	name: 'popupPage',
	props: {
		content: {
			type: Object,
			default: () => ({})
		}
	},
	emits: ['addSuccess'],
	setup(props, { emit, expose }) {
		let popup = ref(null);
		const store = useStore();
		const data = reactive({
			checkType: 1, //记一笔的支出，入账,不计入收支的标识
			checkContent: 0,
			single: formatTime(new Date(), '', '-'),
			//当前类型的数据，名称及图标
			list: computed(() => store.typeList),
			price: '', //记一笔默认金额
			remark: ''
		});
		console.log(props,'porps');
		if (Object.keys(props.content).length > 0) {
				const obj = props.content;
				data.checkType =obj.isType;
				data.checkContent = obj.checkType.split('-')[1];
				data.single = obj.date;
				data.price = obj.price;
				data.remark = obj.remark;
				console.log('data.che',data,'-------');
		}
		
		const open = () => {
			popup.value.open();
			if(Object.keys(props.content).length==0){
				data.checkType = 1;
				data.checkContent = 0;
				data.price = '';
				data.remark = '';
			}
		};
		const close = () => popup.value.close();
		// 记一笔顶部选择导航
		const checkTypeBtn = (k) => {
			console.log('k-------', k);
			data.checkType = k;
			data.checkContent = 0;
		};
		expose({
			open,
			close
		});
		//记一笔弹框中的日期选择
		const maskClick = (e) => {
			data.single = e;
			console.log('时间----', e);
		};
		// 输入金额进行保留两位小数处理
		const priceFormat = () => {
			console.log('1111');
			nextTick(() => {
				data.price = data.price.includes('.') ? Number(data.price).toFixed(2) : data.price;
			});
		};
		// 记一笔当前类型选择事件
		const editCheck = (val) => {
			const type = val.type;
			data.checkType = type.split('-')[0];
			data.checkContent = type.split('-')[1];
		};
		// 跳转到分类管理类型的页面
		const goEditTypeList = () => {
			uni.navigateTo({
				url: '/pages/editTypeList/editTypeList?type=' + data.checkType
			});
		};

		// 记一笔弹框中的确定事件
		const addListBtn = () => {
			const params = {
				date: data.single,
				price: data.price,
				remark: data.remark,
				icon: data.list[data.checkType - 1].list[data.checkContent].icon,
				title: data.list[data.checkType - 1].list[data.checkContent].title,
				checkType: data.list[data.checkType - 1].list[data.checkContent].type,
				type: Object.keys(props.content).length > 0 ? 'edit' : 'add',
				id: store.j_token,
				isType: data.checkType,
				searchDate: data.single.split('-').slice(0, 2).join('-')
			};
			if (Object.keys(props.content).length > 0) {
				params.doc = props.content._id;
			}
			requestApi('jSign', params).then((res) => {
				store.toast(res.result.msg);
				if (res.result.status === 'S') {
					close(); //关闭弹框
					emit('addSuccess');
				}
			});
		};

		return {
			popup,
			...toRefs(data),
			close,
			checkTypeBtn,
			maskClick,
			priceFormat,
			editCheck,
			goEditTypeList,
			addListBtn
		};
	}
};
</script>

<style lang="scss">
.pop-wrap {
	height: 800upx;
	background-color: #fafafa;
	border-radius: 20upx 20upx 0 0;
	box-sizing: border-box;
	padding-bottom: var(--window-bottom);
	.pop-nav {
		height: 100upx;
		line-height: 100upx;
		text-align: center;
		border-bottom: 1upx solid #ccc;
		position: relative;
		padding: 0 40upx;
		.close {
			position: absolute;
			top: 50%;
			left: 40upx;
			font-size: 40upx;
			transform: translateY(-50%);
		}
	}
	.pd {
		font-size: 30upx;
		background: #fafafa;
		padding: 60upx 40upx 0;
		.pop-tt,
		.d-box {
			width: 30%;
			text-align: center;
			box-sizing: border-box;
			padding: 20upx 40upx;
			border-radius: 20upx;
			background: #fff;
		}

		.pop-f::after {
			content: '';
			width: 30%;
		}
		.pop-title {
			font-size: 26upx;
		}
		.mb-20 {
			margin-bottom: 20upx;
		}
		.active {
			background-color: #ffaa7f;
			color: #fff;
		}
	}
	.d-t {
		margin: 40upx 0;
		text-align: center;
	}
	.d-box {
		margin-bottom: 20upx;
	}
	.npt {
		padding: 0 40upx 0;
	}
}
.h80 {
	height: 1000upx;
}
.pof {
	position: fixed;
	right: 20upx;
	bottom: 200upx;
	width: 160upx;
	height: 60upx;
	font-size: 26upx;
	border-radius: 40upx;
	background-color: #fff;
	box-shadow: 0 0 20upx #ccc;
	color: #ffaa7f;
	.edit {
		width: 40upx;
		height: 40upx;
		margin-right: 10upx;
	}
}
.pt {
	display: inline-block;
	padding: 10upx 20upx;
	background-color: #eee;
	margin-right: 20upx;
	border-radius: 10upx;
	font-size: 26upx;
	color: #ccc;
}
.p1 {
	color: #3eb575;
	background-color: #ebf7f1;
}
.p2 {
	background-color: #fdf8eb;
	color: #f0b73a;
}
.p3 {
	background-color: #f1f3f6;
	color: #7888aa;
}

.type-pd {
	padding: 20upx 40upx;
}
.price-t {
	font-size: 40upx;
	font-weight: bold;
	padding: 40upx 40upx;
	border-bottom: 1upx solid #eee;
	& > input {
		width: 100%;
		height: 40upx;
		margin-left: 30upx;
	}
}
.p-c {
	height: 400upx;
	padding: 0 40upx;
	padding-top: 30upx;
	box-sizing: border-box;
}
.p-box {
	width: 20%;
	text-align: center;
	font-size: 24upx;
	margin-bottom: 20upx;
	color: #ccc;
}
.icon-set {
	font-size: 30upx;
	color: #ccc;
	width: 60upx;
	height: 60upx;
	border-radius: 50%;
	background-color: #efefef;
	line-height: 60upx;
	text-align: center;
	margin: 0 auto 10upx;
}
.p-r {
	font-size: 28upx;
	.p-i {
		margin-left: 20upx;
		width: 80%;
	}
}
.icon-jt {
	font-size: 20upx;
}
.b {
	color: #576b95;
}
.confirm {
	width: 80%;
	height: 80upx;
	text-align: center;
	line-height: 80upx;
	font-size: 30upx;
	font-weight: bold;
	border-radius: 20upx;
	margin: 20upx auto 0;
}
.ac {
	color: #000;
}
.ac1 {
	color: #fff;
	background-color: #3eb575;
}
.ac2 {
	color: #fff;
	background-color: #f0b73a;
}
.ac3 {
	color: #fff;
	background-color: #7888aa;
}
.d {
	background-color: #ccc;
	color: #fff;
}
</style>
